<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 覆盖浏览器的默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 覆盖浏览器的默认样式 */
    li {
      list-style: none;
    }

    /* 隐藏下划线 ,字体颜色继承*/
    a {
      color: inherit;
      text-decoration: none;
    }

    ul {
      background: #e8e7e3;

      /* 1、手动给父元素加高度； */
      /* height: 52.4px; */

      /* 2、给父元素设置为display: inline-block;  */
      /* display: inline-block; */

      /* 3、给父元素设置overflow: hidden; */
      /* overflow: hidden; */
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    /* 浮动 */
    /* 浮动副作用：子元素浮动以后，该元素脱离文档流，父元素高度塌陷 可能会改变父类的某些特性*/
    li.float {
      color: #777777;
      padding: 15px 40px;

      /* 浮动 */
      float: left;
    }

    /* 单给div1附颜色 */
    li.active {
      background: #060505;
      color: #e8e7e3;
    }

    li:hover {
      background: #3f3f3f;
      color: #e8e7e3;
    }

    li.clear {
      /* padding: 0;
      float: none; */
      clear: both;
    }

    /* 
      元素浮动的副作用：当元素浮动后，该元素脱离文档流,【父元素高度塌陷】
      解决：
        1、手动给父元素加高度；（当高度未知时不适用）
        2、给父元素设置为display: inline-block;  （可能会改变父元素的默认布局方式）
        3、给父元素设置overflow: hidden; (神奇的魔法)
        4、在父元素里面的最后面加一个不浮动的空块元素，给该块元素清除浮动；（给html加了个本来不需要又的结构）
        5、根据方案4的原理用 .clearfix::affter的方式处理
    */
    #div1 {
      height: 20px;
      /* 超出部分不显示 */
      overflow: hidden;

    }
  </style>
</head>

<body>
  <ul class="clearfix">
    <li class="float active"><a href="">link1</a></li>
    <li class="float"><a href="">link2</a></li>
    <li class="float"><a href="">link3</a></li>
    <li class="float"><a href="">link4</a></li>
    <li class="float"><a href="">link5</a></li>
    <!-- <li class="clear"></li> -->
  </ul>
  <!-- 23456765432 -->
  <div id="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sapiente nihil ipsam maxime dolores
    architecto, facilis consequuntur porro molestiae magnam, mollitia nostrum dignissimos iure? Modi voluptatum error
    officiis aliquam praesentium?</div>
</body>

</html>